<template>
   <el-header>
    <div class="l-contnet">
         <el-button size='small' @click='handleCollapse'>
            <el-icon>
                <Menu />
            </el-icon>
         </el-button>
       <el-breadcrumb separator="/" class="bread"> 
       <!-- 首页是一定存在 写死 -->
    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item v-if='current' :to="current.path">{{current.label}}</el-breadcrumb-item>
   
  </el-breadcrumb>
    </div>
    <div class="r-contnet">
         <el-dropdown>
    <span class="el-dropdown-link">
     <img :src="getImgSrc('avatar')"   class='user'/>
    </span>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item>个人中心</el-dropdown-item>
        <el-dropdown-item @click='quitLogin'>退出</el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
    </div>
   </el-header>
</template>
<script>
import { computed } from '@vue/runtime-core'
import  {useStore} from "vuex" 
import { useRouter } from 'vue-router'
export default {
  setup(){
    // const imgSrc=require('../assets/avatar.jpg')
    //动态加载路径  import.meta.url以base路径为基准
    let store=useStore()
    const router=useRouter()
    let getImgSrc=(user)=>{
      console.log(import.meta.url,new URL(`../assets/${user}.jpg`,import.meta.url))
      return new URL(`../assets/${user}.jpg`,import.meta.url).href
    }
    let handleCollapse=()=>{
      //跳用vuex中的mutations
      store.commit('updateIsCollspse')
    }
    //计算属性
    const current=computed(()=>{
      return store.state.currentMenu
    })
    const quitLogin=()=>{
      //清楚menu
      store.commit('clearMenu')
      store.commit('clearToken')
      router.push({
        path:'login'
      })
    }
    return{
       getImgSrc,handleCollapse,current,quitLogin
    }
  }
}
</script>

<style  lang='less' scoped>
    header{
        display: flex;
        justify-content: space-between;
        align-items: center;
        width:100% ;
        background: #333;
    }
        .user{
            width: 30px;
            height:40px;
            border-radius: 50%;
        }
        .l-contnet{
          display: flex;
          align-items: center;
          .el-button{
            margin-right:20px
          }
          h3{
            color:#fff
          };
        }
</style>